<template>
    <div>
        <el-tabs type="border-card">
            <el-tab-pane label="所有消耗品">
                <!--以下是消耗品查询-->
                <!--<div class="cb_chaxun">
                    <el-input
                            placeholder="请输入消耗品名称/消耗品类型"
                            v-model="input"
                            clearable class="search">
                    </el-input>
                    <el-button type="primary" @click="cb_selectxhp"><i class="el-icon-search"></i></el-button>
                </div>-->

                <!--以下是消耗品展示表-->
                <div class="cb_biao">
                    <el-table
                            :data="this.xhpData"
                            border
                            style="width: 85%"
                            :cell-style="cell_style"
                            :header-cell-style="header_style">
                        <el-table-column
                                prop="id"
                                label="消耗品id"
                                width="180">
                        </el-table-column>
                        <el-table-column
                                prop="goodsName"
                                label="消耗品名称">
                        </el-table-column>
                        <el-table-column
                                prop="goodsClassifyName"
                                label="消耗品类型">
                        </el-table-column>

                        <el-table-column
                                prop="unit"
                                label="消耗品价格">
                        </el-table-column>
                        <el-table-column
                                prop="stock"
                                label="消耗品数量">
                        </el-table-column>
                        <el-table-column
                                prop="provider"
                                label="消耗品供应商">
                        </el-table-column>
                        <el-table-column
                                label="操作">
                            <template slot-scope="scope">
                                <el-button class="cb_xiugaibtn"
                                           size="mini"
                                           @click="handleEdit(scope.$index, scope.row)">修改
                                </el-button>
                                <el-button
                                        size="mini"
                                        type="danger"
                                        @click="handleDelete(scope.$index, scope.row)">删除
                                </el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>

                <!-- 以下是分页-->
                <div class="block">
                    <el-pagination hide-on-single-page
                                   layout="prev, pager, next"
                                   :total="10"
                                   :page-size="5"
                                   :pager-count="5"
                                   @current-change="changePage"
                    >
                    </el-pagination>
                </div>

                <!-- 以下是修改弹出框-->
                <el-dialog title="修改消耗品信息" :visible.sync="dialogFormVisible" width="25%"
                           center>
                    <el-form :model="form" size="mini">
                        <el-form-item label="消耗品编码:" :label-width="formLabelWidth">
                            <p>{{form.id}}</p>
                        </el-form-item>
                        <el-form-item label="消耗品名称:" :label-width="formLabelWidth">
                            <el-input v-model="form.goodsName" autocomplete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="消耗品类型:" :label-width="formLabelWidth">
                         <!--   <el-select v-model="form.classifyId" placeholder="请选择消耗品类型">
                                <el-option label="肉类" value="shanghai"></el-option>
                                <el-option label="调味品" value="beijing"></el-option>
                                <el-option label="蔬菜类" value="beijing"></el-option>
                            </el-select>-->
                            <el-input v-model="form.goodsClassifyName" autocomplete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="消耗品价格:" :label-width="formLabelWidth">
                            <el-input v-model="form.unit" autocomplete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="消耗品数量:" :label-width="formLabelWidth">
                            <el-input v-model="form.stock" autocomplete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="消耗品供应商:" :label-width="formLabelWidth">
                            <el-input v-model="form.provider" autocomplete="off"></el-input>
                        </el-form-item>
                    </el-form>
                    <div slot="footer" class="dialog-footer">
                        <el-button type="primary" @click="tijiao">提 交</el-button>
                        <el-button @click="dialogFormVisible = false">取 消</el-button>
                    </div>
                </el-dialog>


            </el-tab-pane>

            <!--以下是添加商品-->
            <el-tab-pane label="添加消耗品">
                <Tjxhp></Tjxhp>
            </el-tab-pane>

        </el-tabs>
    </div>
</template>

<script>
    import {mapActions, mapState} from 'vuex'
    import axios from 'axios'/*'../../http/http'*/
    /*import * as api from '../../http/api'*/
    import Tjxhp from './cb_xhptj'

    export default {
        name: "cb_xhpgl",
        components:{
        Tjxhp
        },
        data() {
            return {
                input: '',//输入框初始值
                dialogTableVisible: false,
                dialogFormVisible: false,
                form: {
                    id: '',
                    goodsName: '',
                    goodsClassifyName: '',
                    unit: '',
                    stock:'',
                    provider:'',
                },
                formLabelWidth: '100px',
            }
        },
        methods: {
            ...mapActions(['getxhpData']),
            cell_style(row, column, rowIndex, columnIndex) {
                return ' text-align: center';
            },
            header_style(row, rowIndex) {
                return ' text-align: center';
            },
            changePage(val) {
                let data = {
                    "currentPage": val,
                    'pageSize': 5
                }
                this.getxhpData(data)
            },
            handleEdit(index, item) {
                this.dialogFormVisible = true
              /*  console.log(item.id)*/
                this.form.id = item.id
                this.form.goodsName = item.goodsName
                this.form.goodsClassifyName = item.goodsClassifyName
                this.form.unit = item.unit
                this.form.stock = item.stock
                this.form.provider = item.provider
            },

            /*     handleDelete(index, row) {
                 },*/
            ...mapActions(['removexhp']),
            handleDelete(index, row) {
              /*  console.log(row.id)*/
                let data={'id':row.id}
              /*  console.log(data)*/
                this.removexhp(data)
                this.$message({
                    type: 'success',
                    message: '删除成功!'
                })
            },

            //以下是提交的方法
            ...mapActions(['updata']),
            tijiao() {
               /* console.log("提交按钮可以实现")*/
                let data = {
                    "goodsClassifyName": this.form.goodsClassifyName,
                    "goodsName": this.form.goodsName,
                    "goodsUnitsName": "string",
                    "id": this.form.id,
                    "provider": this.form.provider,
                    "saturation": 5000,
                    "stock": this.form.stock,
                    "unit": this.form.unit
                }
                //这个data是修改框里的值，需要传给store，是修改的实参
                this.updata(data)
                this.dialogFormVisible = false
                this.$message({
                    type: 'success',
                    message: '修改成功!'
                })
            },

            //以下是查询的方法
        },
        computed: {
            ...mapState({
                //计算vuex里面的数据
                xhpData: function (state) {
                    return state.cb_xhpStore.xhpData
                  /*当前页数据*/
                }
            }),
            //计算当前页数据和总数据条数
            total() {
                return this.xhpData.length
            },


        },
        created() {
            let data= {
                "currentPage": 1,
                'pageSize':5
            }
            this.getxhpData(data).then(res=>{})
        }


    }
</script>

<style scoped lang="less">

    .el-table {
        margin: auto;
    }

    .cb_chaxun {
        width: 50%;
        float: right;
        padding: 10px;

    .search {
        width: 50%;
    }

    .el-button {
        margin-left: 20px;
    }
    }

    .cb_xiugaibtn{
        background-color: #409EFF;
    }
</style>